$(function(){
    // 添加的弹出层索引
    let addIndex = null
    // 编辑的弹出层索引
    let editIndex = null

    // 初始化文章分类数据的方法
    function initArtCate(){
        $.get('/my/article/cates',function(res){
            if(res.status === 0){
                // 基于模板引擎技术，渲染表格的结构
                const htmlStr = template('tmpl-tr',res)
                $('tbody').html(htmlStr)
            }
        })
    }
    initArtCate()

    // 为添加分类的按钮绑定点击事件
    $('#btnShowAdd').on('click',function(){
        // 展示弹出层
        addIndex = layer.open({
            // 指定弹框的类型
            type: 1,
            // 标题
            title:'添加文章分类',
            // 宽和高
            area: ['500px', '250px'],
            // 内容主体
            // 把指定元素的子节点读取为 HTML 的字符串，赋值给 content 
            content: $('#tmpl-form-add').html()
        });    
    })

    // 为添加按钮绑定 submit 事件
    $('body').on('submit','#form-add',function(e){
        e.preventDefault()
        // 向服务器发送数据
        $.post('/my/article/addcates',$(this).serialize(),function(res){
            layer.msg(res.message)
            if(res.status === 0){
                // 请求成功后关闭弹窗
                layer.close(addIndex)
                // 刷新列表数据
                initArtCate()
            }
        })
    })

    // 为编辑按钮绑定 点击事件
    $('body').on('click','.btn-edit',function(){
        editIndex = layer.open({
            // 指定弹框的类型
            type: 1,
            // 标题
            title:'添加文章分类',
            // 宽和高
            area: ['500px', '250px'],
            // 内容主体
            // 把指定元素的子节点读取为 HTML 的字符串，赋值给 content 
            content: $('#tmpl-form-edit').html()
        });
        // 获取数据  回显到页面上
        // 获取当前这一行数据的 Id
        const id = $(this).attr('data-id')
        $.get('/my/article/cates/' + id,function(res){
            if(res.status === 0){
                // form.val('表单', 数据对象)
                // 回显到页面上
                layui.form.val('form-edit', res.data)
            }
        })
    })

    // 为 确认修改 表单按钮绑定 submit 事件
    $('body').on('submit','#form-edit',function(e){
        // 阻止表单默认提交行为
        e.preventDefault()

        $.post('/my/article/updatecate',$(this).serialize(),function(res){
            // 提示用户编辑的结果
            layer.msg(res.message)
            if(res.status === 0){
                // 表示编辑成功
                // 关闭弹出层
                layer.close(editIndex)
                // 重新将分类数据渲染到页面上
                initArtCate()
            }
        })
    })

    // 实现删除功能的步骤
    // 为删除按钮 绑定点击事件处理函数,
    // 弹窗
    // 发起请求 删除数据
    // 删除成功后重新渲染列表数据
    $('body').on('click','.btn-delete',function(){
        const Id = $(this).attr('data-id')
        // 弹出对话框  询问用户是否删除数据
        layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
            $.get('/my/article/deletecate/' + Id,function(res){
                if(res.status === 0){
                    // 重新渲染列表数据
                    initArtCate()
                }
            })
  
            layer.close(index);
        });
    })

})